<template>
    <div class="jrHumanConfirmMoney">
        <van-nav-bar title="开票信息" left-text="返回" left-arrow border fixed @click-left="$router.go(-1)" />
        <div style="height:50px"></div>
        <van-cell-group>
            <van-field v-model="info.company_name" label="客户名称" disabled size="large" />
            <van-field v-model="info.invoice_price" label="总金额" disabled size="large" />
            <van-field v-if="type =='set'" required readonly clickable label="开票时间" :value="invoice_time" placeholder="--请选择--" @click="dangerPop = true" />
            <van-field v-else v-model="info.invoice_time_text" label="开票时间" disabled size="large" />
        </van-cell-group>

        <div class="up-img" v-if="type =='set'">
            <div><span style="color: red;">*</span>发票</div>
            <van-uploader v-model="business_license" multiple :max-count="1" :after-read="afterRead" :name="1">
                <img class="up-icon" src="../../assets/img/money_evidence.png" alt="">
            </van-uploader>
        </div>
        <div class="up-img1" v-else>
            <div>发票</div>
            <img class="up-icon" :src="info.invoice_image">
        </div>
        <van-popup v-model="dangerPop" position="bottom">
            <van-datetime-picker v-model="dangerDate" type="date" :min-date="minDate" @cancel="dangerPop = false" @confirm="timeConfirm()" />
        </van-popup>
        <div class="foot-btn" v-if="type =='set'">
            <div class="blue-btn" @click="save">保存</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "insuranceInvoice",
    data() {
        return {
            type: '',
            invoice_time: '',
            minDate: new Date(1970, 0, 1),
            dangerDate: new Date(),
            dangerPop: false,


            business_license: [], //营业执照
            qiniuToken: '',
            info: {
                balance: '',
                price: '',
                money: '',
                annex: '',
            }
        };
    },
    methods: {
        // 获取信息
        infoData() {
            let params = {
                token: localStorage.getItem('token'),
                wx_member_id: localStorage.getItem('wx_member_id'),
                id: this.$route.query.id,
            }
            this.$post("/api/order_detail/confirm_billing", params)
                .then(res => {
                    this.info = res.data
                })
                .catch(err => { });
        },
        // 获取七牛云token
        getQiniuToken() {
            this.$post("/api/qiniu/up_token", {})
                .then(res => {
                    this.qiniuToken = res
                })
                .catch(err => { });

        },
        // 上传图片
        afterRead(file) {
            this.$Toast.loading({
                message: '上传中',
                duration: 0,
                forbidClick: true
            });
            this.$QiniuUpload(this.qiniuToken, file)
                .then(res => {
                    this.$Toast.clear();
                    this.business_license = [
                        { url: this.qiniuToken.domain + res.key },
                    ]
                    this.info.annex = this.qiniuToken.domain + res.key
                })
                .catch(err => {
                    this.$Toast.clear();
                });

        },
        // 保存收款信息
        save() {
            console.log(this.business_license.length);
            if (!this.invoice_time) {
                this.$Toast('请选择开票时间');
                return;
            }
            if (this.business_license.length == 0) {
                this.$Toast('请上传发票');
                return;
            }
            let params = {
                token: localStorage.getItem('token'),
                wx_member_id: localStorage.getItem('wx_member_id'),
                member_goods_id: this.$route.query.id,
                order_id: this.$route.query.id,
                type: 1,
                invoice_time: this.invoice_time,
                invoice_image: this.business_license[0].url,
            }
            console.log(params);
            this.$post("/api/order_detail/save_confirm_billing", params)
                .then(res => {
                    if (res.code == 1) {
                        this.$Toast(res.msg);
                        this.$router.go(-1)
                    } else {

                        this.$Toast(res.msg);
                    }
                })
                .catch(err => { });
        },
        timeConfirm() {
            this.invoice_time = this.timeTurn(this.dangerDate);
            this.dangerPop = false
        },
        timeTurn(val) {
            return this.$formatDateTime(val, 'yyyy-MM-dd');
        },
    },
    created() {
        // 实例创建完成
        this.infoData();
        this.getQiniuToken()
        this.type = this.$route.query.type
    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#fff");
    }
}
</script>

<style scoped lang='less'>
.up-img {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    font-size: 13px;
    padding-right: 15px;
    margin-bottom: 15px;

    > div:nth-of-type(1) {
        margin-left: 13px;
        margin-right: 22px;
    }

    .up-icon {
        width: 57vw;
        height: 112px;
    }
}
.up-img1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    font-size: 13px;
    padding-right: 15px;
    margin-bottom: 15px;

    > div:nth-of-type(1) {
        margin-left: 13px;
        margin-right: 22px;
    }

    .up-icon {
        width: 57vw;
    }
}

.foot-btn {
    padding-bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
}
</style>